<template>
  <div class="hello">
    <div class="container my-5">
      <div
        class="
          row
          p-4
          pb-0
          pe-lg-0
          pt-lg-5
          align-items-center
          rounded-3
          border
          shadow-lg
        "
      >
        <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
          <div id="he-plugin-standard"></div>
          <br /><br />
          <h1 class="display-4 fw-bold lh-1">
            Border hero with cropped image and shadows
          </h1>
          <p class="lead">
            Quickly design and customize responsive mobile-first sites with
            Bootstrap, the world’s most popular front-end open source toolkit,
            featuring Sass variables and mixins, responsive grid system,
            extensive prebuilt components, and powerful JavaScript plugins.
          </p>
          <div
            class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3"
          >
            <br />
            <h5 class="card-title">查找品类</h5>

            <form class="form-inline">
              <div class="form-group mx-sm-3 mb-2">
                <input
                  v-model="cate"
                  type="text"
                  class="form-control"
                  :style="{ width: '300px' }"
                />
              </div>
              <router-link
                :to="{ path: '/productsDataDisplay', query: { cate: cate } }"
                class="btn btn-primary mb-2"
                >产品数据展示</router-link
              >
            </form>
          </div>
          <div
            class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3"
          >
            <button
              type="button"
              class="btn btn-primary btn-lg px-4 me-md-2 fw-bold"
            >
              Primary
            </button>
            <button type="button" class="btn btn-outline-secondary btn-lg px-4">
              Default
            </button>
          </div>
        </div>
        <div class="col-lg-4 offset-lg-1 p-0 overflow-hidden shadow-lg">
          <img class="rounded-lg-3" src="static/img/1.jpg" alt="" width="720" />
        </div>
        <vegetable></vegetable>
        <fruit></fruit>
        <EggsAndMeat></EggsAndMeat>
        <nuts></nuts>
        <fungus></fungus>
        <GrainOilCrops></GrainOilCrops>
      </div>
    </div>
  </div>
</template>

<script>
import vegetable from "@/components/species/vegetable";
import fruit from "@/components/species/fruit";
import EggsAndMeat from "@/components/species/EggsAndMeat";
import nuts from "@/components/species/nuts";
import fungus from "@/components/species/fungus";
import GrainOilCrops from "@/components/species/GrainOilCrops";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "System-Development",
      cate: "",
    };
  },
  methods: {},
  created() {
    window.WIDGET = {
      CONFIG: {
        layout: "1",
        width: "450",
        height: "150",
        background: "1",
        dataColor: "FFFFFF",
        borderRadius: "7",
        key: "465d273674104300a125afcae56c08b7",
      },
    };
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src =
      "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
    document.body.appendChild(s);

    const a = document.createElement("script");
    a.type = "text/javascript";
    a.src = "../static/js/bootstrap.min.js";
    document.body.appendChild(a);
  },
  components: {
    vegetable: vegetable,
    fruit: fruit,
    EggsAndMeat: EggsAndMeat,
    nuts: nuts,
    fungus: fungus,
    GrainOilCrops: GrainOilCrops,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}

input {
  margin: 10px auto;
  position: relative;
}
.ca {
  margin: 10px auto;
  position: relative;
}
</style>
